<template>
  <!-- 个人信息界面头部信息 -->
  <div class="personHeadMoudle">
    <PersonHead />
  </div>

  <!-- 个人信息主体界面 -->
  <div class="personDataModule">
    <!-- 个人信息界面导航 -->
    <div class="personMenuModule">
        <PersonMenu />
    </div>

    <div class="dataModule">
        
    </div>
  </div>

    <!-- 个人界面底栏 -->
  <div class="personButtomModule">
    <PersonButtom />
  </div>
</template>

<script>
import PersonHead from '@/components/PersonHead.vue';
import PersonMenu from '@/components/PersonMenu.vue';
import PersonButtom from "@/components/PersonButtom.vue";

export default {
  components: { PersonHead, PersonMenu, PersonButtom },
  setup() {},
};
</script>

<style>
body {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  margin: 0;
}

.personDataModule {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 80vh;
}

.dataModule {
    width: 60%;
    height: 100%;
    background-color: #e7f6ff;
}
</style>